<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<com1 @func='show'></com1>
		</div>

		<template id="tmpl">
			<div>
				<h1>子组件</h1>
				<input type="button" name="" id="" value="子组件的按钮" @click="myclick"/>
			</div>
		</template>
		
		<script type="text/javascript">
			var com1={//定义一个字面量类型的 组件模板对象
				template:"#tmpl",
				data:function(){
					return {
						son:{
							name:"大儿子",age:"4",
						}
					}
				},
				methods:{
					myclick(){
						this.$emit('func',this.son)//emit 英文:触发的意思
					}
				}
			}
			
		var vm=	new Vue({
				el:"#app",
				data:{
					myson:null
				},
				methods:{
					show(data){
						this.myson=data
						console.log(data)
					}
				},
				components:{
					com1
				}
			});
			
		</script>
	</body>
</html>
